<!--这是供 资金 组件-->
<template>
  <div class="app-container">
    <el-form :model="postForm" v-loading="formLoading" :rules="rules" ref="postForm" label-width="220px" label-position="right">
      <p class="title">发布 供 资金</p>
      <el-form-item label="所求标题：" prop="title">
        <el-input v-model="title" placeholder="请输入所求标题（不超过30个字）" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="可供资金：" prop="capital">
        <el-input v-model="capital" placeholder="单位为元" style="width: 650px"></el-input>
      </el-form-item>
      
      <el-form-item label="期望地区：" prop="place">
        <v-distpicker :province="postForm.citySelect.province" :city="postForm.citySelect.city" :area="postForm.citySelect.area" style="float: left;"></v-distpicker>
      </el-form-item>
      <el-form-item label="行业要求：" prop="tradeRequire">
        <el-checkbox-group v-model="postForm.tradeRequire">
          <el-checkbox label="互联网" name="tradeRequire"></el-checkbox>
          <el-checkbox label="医疗" name="tradeRequire"></el-checkbox>
          <el-checkbox label="文化旅游" name="tradeRequire"></el-checkbox>
          <el-checkbox label="高科技" name="tradeRequire"></el-checkbox>
          <el-checkbox label="房地产" name="tradeRequire"></el-checkbox>
          <el-checkbox label="金融" name="tradeRequire"></el-checkbox>
          <el-checkbox label="其他" name="tradeRequire"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      
      <el-form-item label="资金用途：" prop="use">
        <el-input v-model="postForm.use" placeholder="请输入您希望资金用在什么领域(不超过100个字)" style="width: 650px;"></el-input>
      </el-form-item>
      <el-form-item label="联系人：" prop="contact">
        <el-input v-model="postForm.contact" placeholder="请填写联系人" style="width: 650px"></el-input>
      </el-form-item>
      
      <el-form-item label="联系方式：" prop="phone">
        <el-input v-model="postForm.phone" placeholder="请填写联系方式" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="微信号：">
        <el-input v-model="postForm.wechatNum" placeholder="请填写微信号" style="width: 650px"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
        <el-button type="info">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import VDistpicker from 'v-distpicker' // 引入城市选择器插件

const postForm = {
  title: null, // 所求标题
  capital: null, // 希望资金
  use: null, // 资金用途
  tradeRequire: [], // 行业要求（多选）
  contact: null, // 联系人
  phone: null, // 联系方式
  wechatNum: null, // 微信号
  citySelect: { province: '福建省', city: '厦门市', area: '集美区' } // 所在地区
}

const rules = {
  title: [{ required: true, message: '请输入所求标题', trigger: 'blur' }],
  capital: [{ required: true, message: '请输入可供资金', trigger: 'blur' }],
  place: [{ required: true, message: '请选择地区', trigger: 'change' }],
  tradeRequire: [{ required: true, message: '请选择行业要求', trigger: 'change' }],
  use: [{ required: true, message: '请输入资金用途', trigger: 'blur' }],
  contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
}

export default {
  components: {
    VDistpicker
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: Object.assign({}, postForm),
      rules,
      formLoading: false,
      btnLoading: false
    }
  },
  methods: {
    submitForm() {
    }
  }
}
</script>
<style scoped>
	.title{
		font-size: 18px;
		line-height: 36px;
		padding: 0 10px;
	}
</style>